<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>File Viewer</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

    <script>hljs.highlightAll();
                {% set FILE_ICONS = {
                'directory': '📁',
                'default': '📄',
                '.py': '🐍',
                '.js': '🚀',
                '.ts': '🟦',
                '.java': '☕',
                '.c': '🔧',
                '.cpp': '🔩',
                '.cs': 'Ⓜ️',
                '.go': '🐹',
                '.rs': '🦀',
                '.html': '🌐',
                '.htm': '🌐',
                '.css': '🎨',
                '.scss': '🎀',
                '.less': '🟣',
                '.md': '📝',
                '.json': '📦',
                '.xml': '📜',
                '.csv': '📊',
                '.xlsx': '📈',
                '.xls': '📉',
                '.doc': '📃',
                '.docx': '📑',
                '.ppt': '📽️',
                '.pptx': '🎞️',
                '.pdf': '📚',
                '.png': '🖼️',
                '.jpg': '🌅',
                '.jpeg': '🌄',
                '.gif': '🎆',
                '.mp4': '🎥',
                '.mp3': '🎵',
                '.exe': '⚙️',
                '.bat': '🖥️',
                '.sh': '📟',
                '.zip': '🗜️',
                '.rar': '🎒',
                '.tar': '📦',
                '.gz': '⛑️',
                '.yml': '⚙️',
                '.yaml': '⚙️',
                '.toml': '⚙️',
                '.ini': '⚙️',
                '.sql': '🗃️',
                '.log': '📰',
                '.lock': '🔒'
            } %};

    </script>
    <script>

        document.addEventListener('DOMContentLoaded', () => {

            // 聊天功能
            const chatInput = document.querySelector('.chat-input input');
            const chatMessages = document.querySelector('.chat-messages');

            // 修改后的消息发送函数
            window.sendMessage = async () => {
                const input = document.getElementById('message-input');
                const message = input.value.trim();
                if (!message) return;

                // 添加用户消息
                const chatBox = document.querySelector('.chat-messages');
                chatBox.innerHTML += `
                    <div class="message user">
                        <img src="/static/user-avatar.png" class="avatar">
                        <div class="content">${message}</div>
                    </div>
                `;

                // 添加机器人消息容器
                const botMessageDiv = document.createElement('div');
                botMessageDiv.className = 'message ai';
                botMessageDiv.innerHTML = `
                    <img src="/static/robot-avatar.png" class="avatar">
                    <div class="content" id="bot-response"></div>
                `;
                chatBox.appendChild(botMessageDiv);

                // 滚动到底部
                chatBox.scrollTop = chatBox.scrollTop + 1000;

                try {
                    const response = await fetch('/api/chat-stream', {
                        method: 'POST',
                        headers: {'Content-Type': 'application/json'},
                        body: JSON.stringify({ message: message })
                    });

                    const reader = response.body.getReader();
                    const decoder = new TextDecoder();
                    let responseContent = '';

                    while (true) {
                        const { done, value } = await reader.read();
                        if (done) break;

                        const chunk = decoder.decode(value);
                        responseContent += chunk;

                        // 更新显示内容
                        document.getElementById('bot-response').innerHTML =
                            responseContent.replace(/\n/g, '<br>');

                        // 自动滚动
                        chatBox.scrollTop = chatBox.scrollHeight;
                    }

                    input.value = '';
                } catch (error) {
                    console.error('发送消息失败:', error);
                    document.getElementById('bot-response').innerHTML =
                        '请求失败，请稍后重试';
                }
            }


            // 初始化
            loadFileTree();

            // 绑定回车事件
            chatInput.addEventListener('keypress', (e) => {
                if (e.key === 'Enter') sendMessage();
            });
        });
    </script>


    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            height: 100vh;
            margin: 0;
        }

        /* 左侧资源管理器 */
        .sidebar {
            width: 280px;
            background: #4ecdc4;
            border-right: 1px solid #dee2e6;
            padding: 20px;
            overflow-y: auto;
        }

        #sidebar {
            width: 250px;
            background-color: #f4f4f4;
            padding: 20px;
            overflow-y: auto;
        }
        #sidebar ul {
            list-style-type: none;
            padding: 0;
        }
        #sidebar ul li {
            margin: 5px 0;
        }
        #sidebar ul li a {
            text-decoration: none;
            color: #333;
        }
        #content {
            flex-grow: 1;
            padding: 20px;
            overflow-y: auto;
        }
        iframe {
            width: 100%;
            height: 100%;
            border: none;
        }

             .custom-list {
            list-style: none;
            width: 260px;
            padding: 0;
            margin: 0;
        }
        .custom-list li {
            margin: 8px 0;
            padding: 5px;
            background: #f5f5f5;
            border-radius: 4px;
        }
        .custom-list a {
            text-decoration: none;
            color: #2c3e50;
            display: block;
        }
        .custom-list a:hover {
            color: #3498db;
            background: #f0f8ff;
        }

        .header {
        text-align: center;
        margin-bottom: 10px;
        padding: 6px 0 10px;
        background: linear-gradient(45deg, #ff6b6b, #4ecdc4); /* 双色对角线渐变 */
        }

    /* 右侧对话区 */
    .chat-panel {
        width: 600px;
        height: calc(101.7vh - 70px);
        background: white;
        border-left: 1px solid #dee2e6;
        display: flex;
        flex-direction: column;
    }

    .chat-header {
        padding: 20px;
        border-bottom: 1px solid #dee2e6;
    }

    .chat-messages {
        flex: 1;
        overflow-y: auto;
        padding: 15px;
    }

    .content {
        max-width: 80%;
        padding: 10px 15px;
        border-radius: 12px;
    }


    .message {
        margin: 10px 0;
        padding: 10px;
        border-radius: 10px;
        max-width: 80%;
    }

    .message.ai {
        background: var(--ai-bubble);
        margin-right: auto;
    }

    .message.user {
        background: var(--user-bubble);
        margin-left: auto;
    }

    .chat-input {
        padding: 15px;
        border-top: 1px solid #dee2e6;
        display: flex;
        gap: 10px;
    }

    .chat-input input {
        flex: 1;
        padding: 8px;
        border: 1px solid #dee2e6;
        border-radius: 5px;
    }

    .send-btn {
      /* 基础样式 */
      display: inline-block;
      padding: 12px 24px;
      border: none;
      border-radius: 25px;  /* 控制圆角程度 */
      background-color: #4CAF50;
      color: white;
      font-size: 16px;
      font-family: 'Arial', sans-serif;
      cursor: pointer;
      transition: all 0.3s ease;

      /* 阴影效果 */
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    /* 悬停效果 */
    .send-btn:hover {
      background-color: #45a049;
      transform: translateY(-2px);
      box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2);
    }

    /* 点击效果 */
    .send-btn:active {
      transform: translateY(1px);
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    /* 禁用状态 */
    .send-btn:disabled {
      background-color: #cccccc;
      cursor: not-allowed;
      opacity: 0.7;
    }
    /* 中间工作区 */
    .workspace {
        flex: 1;
        background: white;
    }
    .code-editor {
        width: 100%;
        height: calc(92vh - 70px);
        padding: 15px;
        border: 1px solid #dee2e6;
        border-radius: 5px;
        font-family: 'Consolas', monospace;
        font-size: 14px;
        resize: none;
    }

    </style>
</head>
<body>
    <div class="sidebar" id="sidebar">
        <header class="header">
            <h4>OpenManusX</h4>
        </header>
<!--        <ul>-->
<!--            {% for file in files %}-->
<!--            <li><a href="/file/{{ file }}">{{ file }}</a></li>-->
<!--            {% endfor %}-->
<!--        </ul>-->
           <ul class="custom-list">
                {% for file in files %}
                {% set extension = file.split('.')[-1].lower() %}
                {% set icon = FILE_ICONS['.' + extension] if '.' + extension in FILE_ICONS else FILE_ICONS['default'] %}
                <li><a href="/file/{{ file }}" >{{ icon }} {{ file }}</a></li>
                {% endfor %}
            </ul>
    </div>
            <!-- 中间工作区 -->
    <div class="workspace">
        <div   class="code-editor"  id="content">
            <header class="header">
                    <h4>OpenManusX文件预览区及保存区！</h4>
                </header>
            <iframe id="file-preview"></iframe>
        </div>
    </div>


    <!-- 右侧对话区 -->
    <div class="chat-panel">
            <div class="chat-header">
                <header class="header">
                    <h4>deepseek R1满血版</h4>
                </header>
                <div class="editor-header">
                    <div class="tab active"> 🟢 已连接</div>
                </div>
            </div>

            <!-- 前端修改 -->
            <div class="chat-messages">
                <div class="message ai">
                    <img src="/static/robot-avatar.png" class="avatar">
                    <div class="content">您好！我是AI助手，需要什么帮助？</div>
                </div>
            </div>
            <div class="chat-input">
                <input type="text" id="message-input" placeholder="输入消息...">
                <button class="send-btn" onclick="sendMessage()">发送</button>
            </div>
    </div>

    <script>
        document.querySelectorAll('#sidebar a').forEach(link => {
            link.addEventListener('click', function(event) {
                event.preventDefault();
                const url = this.getAttribute('href');
                document.getElementById('file-preview').src = url;
            });
        });
    </script>
</body>
</html>
